<template>
  <a-modal
    v-drag
    width="500px"
    v-bind="modalOption"
    :mask-closable="false"
    :okText="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model layout="horizontal" labelAlign="right" ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="form" :rules="validatorRules">
        <!-- <a-form-model-item label="旧密码" prop="oldPassword">
          <a-input-password placeholder="请输入旧密码" v-model.trim="form.oldPassword" />
        </a-form-model-item> -->
        <a-form-model-item label="新密码" prop="newPassword">
          <a-input-password placeholder="请输入新密码" v-model.trim="form.newPassword" />
        </a-form-model-item>
        <a-form-model-item label="确认密码" prop="confirmPassword">
          <a-input-password placeholder="请输入再次输入新密码" v-model.trim="form.confirmPassword"  />
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import ModalFormMixin from '@/mixins/ModalFormMixin'
import { updatepwdwithcheck } from '@/services/user'
import { mapMutations, mapState } from 'vuex'
export default {
  nam: 'UpdatePassword',
  mixins: [ModalFormMixin],
  props: {
    pwdExpiredFlag: {
      type: Boolean,
      default: () => false
    },
    user: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      validatorRules: {
        newPassword: [],
        confirmPassword: [
          { required: true, message: '请再次输入新密码' },
          { validator: this.compareToFirstPassword }
        ],
        oldPassword: [
          { required: true, message: '请输入旧密码' }
        ]
      },
      title: '请修改密码',
      newPasswordRules: [
        { required: true, message: '请输入新密码' },
        { validator: this.validatorToOldPassword }
      ]
    }
  },
  watch: {
    'systemConfig.passwordStrategy': {
      handler(val) {
        this.validatorRules.newPassword = [].concat(this.newPasswordRules, val)
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
    ...mapState('setting', ['systemConfig'])
  },
  methods: {
    ...mapMutations('account', ['clearStorage']),
    show(data) {
      this.visible = true
    },
    handleOk() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.request(this.form)
        }
      })
    },
    handleCancel() {
      this.clearStorage()
      this.close()
    },
    request(data) {
      this.confirmLoading = true
      // formData.username = this.formData.username
      // formData.oldPassword = this.formData.password
      updatepwdwithcheck({
        ...data,
        username: this.user.username,
        oldPassword: this.user.password
      }).then(res => {
        if (res.success) {
          this.handleCancel()
          this.$message.success('修改成功，请重新登录')
        }
      }).finally(() => {
        this.confirmLoading = false
      })
    },
    compareToFirstPassword(rule, value, callback) {
      if (value && value !== this.form.newPassword) {
        callback('两次输入的密码不一致')
      } else {
        callback()
      }
    },
    validatorToOldPassword(rule, value, callback) {
      if (value && value === this.user.password) {
        callback('不能与旧密码相同')
      } else {
        callback()
      }
    },
    beforeunloadHandler() {
      this.pwdExpiredFlag && this.clearStorage()
    }
  },
  mounted() {
    window.addEventListener('beforeunload', this.beforeunloadHandler, false)
  },
  beforeDestroy() {
    window.removeEventListener('beforeunload', this.beforeunloadHandler, false)
  }
}
</script>
